<template>
    <div style="height: 100%">
        <!--左侧导航栏-->
        <ICol span="4" style="height: 100%;width:15%;z-index: 9999">
            <!--放置图标-->
            <Menu name="logo" style="height:8%;display: flex;justify-content: center;align-items: center;width: 100%"
                  theme="dark">
                <span class="ivu-avatar ivu-avatar-circle ivu-avatar-large">
                    <img src="../assets/images/logo.png">
                </span>
                <span style="color:white;font-weight: bolder;font-size: larger;margin-left: 6%">Edward博客后台</span>
            </Menu>
            <Menu style="width: 100%;height: 92%" class="left-col" theme="dark" accordion>
                <Submenu v-for="(item,index) in menuList" :key="index" :name="item.name">
                    <!--一级列表-->
                    <template slot="title">
                        <Icon :type="item.icon"/>
                        {{item.name}}
                    </template>
                    <!--二级列表-->
                    <MenuItem v-for="(childItem,index2) in item.children" :key="index2"
                              :name="childItem.name"
                              :to="childItem.path">
                        <template>
                            <Icon :type="childItem.icon"/>
                            {{childItem.name}}
                        </template>
                    </MenuItem>
                </Submenu>
            </Menu>
        </ICol>
        <!--水平方向导航栏-->
        <Menu mode="horizontal" theme="light" style="height: 8%;">
            <!--个人信息-->
            <MenuItem name="1" style="margin-left: 66%">
                <div @click="refresh">
                    <Icon type="md-refresh"/>
                    刷新
                </div>
            </MenuItem>
            <Submenu name="2">
                <template slot="title">
                   <span class="ivu-avatar ivu-avatar-circle ivu-avatar-image ivu-avatar-large">
                    <img :src="headPic">
                </span>
                    <span class="i-layout-header-user-name">{{nickname}}</span>
                </template>
                <MenuItem name="2-1">
                    <div @click="logout">退出</div>
                </MenuItem>
            </Submenu>
        </Menu>
        <!--主体部分-->
        <div style="background-color: #f5f7f9;height: 88%">
            <router-view/>
        </div>
        <!--底部-->
        <div style="height: 4%;display: flex;justify-content: center;align-items: center">
            <p>Copyright ©{{nowYear}} Edward | 备案号：皖ICP备20006135号-1</p>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        nowYear: 0,
        nickname: '',
        headPic: '',
        // 存放显示的tab标签
        tabs: [],
        menuList: [
          {
            icon: 'ios-copy',
            name: '博客管理',
            children: [
              {
                icon: 'md-keypad',
                name: '分类列表',
                path: '/index/category'
              },
              {
                icon: 'md-create',
                name: '发布博客',
                path: '/index/addArticle'
              },
              {
                icon: 'md-copy',
                name: '博客列表',
                path: '/index/article'
              },
              {
                icon: 'md-crop',
                name: '评论列表',
                path: '/index/comment'
              }
            ]
          },
          {
            icon: 'md-contact',
            name: '用户管理',
            children: [
              {
                icon: 'md-people',
                name: '用户列表',
                path: '/index/user'
              }
            ]
          },
          {
            icon: 'ios-information-circle',
            name: '消息通知',
            children: [
              {
                icon: 'md-information-circle',
                name: '通知列表',
                path: '/index/inform'
              }
            ]
          },
          {
            icon: 'ios-send',
            name: '留言管理',
            children: [
              {
                icon: 'ios-send-outline',
                name: '留言列表',
                path: '/index/message'
              }
            ]
          },
          {
            icon: 'ios-book',
            name: '书籍管理',
            children: [
              {
                icon: 'ios-book-outline',
                name: '书籍列表',
                path: '/index/book'
              }
            ]
          },
          {
            icon: 'ios-bookmarks',
            name: '日记管理',
            children: [
              {
                icon: 'ios-bookmarks-outline',
                name: '日记列表',
                path: '/index/diary'
              }
            ]
          },
          {
            icon: 'ios-browsers',
            name: '日志管理',
            children: [
              {
                icon: 'ios-browsers-outline',
                name: '日志列表',
                path: '/index/updateLog'
              }
            ]
          },
          {
            icon: 'ios-link',
            name: '友链管理',
            children: [
              {
                icon: 'ios-link-outline',
                name: '友链列表',
                path: '/index/friendBlog'
              }
            ]
          },
          {
            icon: 'ios-square',
            name: '首页管理',
            children: [
              {
                icon: 'ios-map-outline',
                name: '导航栏列表',
                path: '/index/nav'
              },
              {
                icon: 'ios-pricetags-outline',
                name: '标签列表',
                path: '/index/tag'
              },
              {
                icon: 'logo-wordpress',
                name: '建议列表',
                path: '/index/advice'
              },
              {
                icon: 'ios-bug-outline',
                name: 'Bug列表',
                path: '/index/bug'
              }
            ]
          }
        ]
      }
    },
    mounted() {
      this.nowYear = new Date().getFullYear()
      this.nickname = window.sessionStorage.getItem('nickname')
      this.headPic = window.sessionStorage.getItem('headpicture')
    },
    methods: {
      // 刷新
      refresh() {
        this.$router.push('/index')
      },
      // 退出登录
      logout() {
        window.sessionStorage.removeItem('lhamster_identity_info')
        window.sessionStorage.removeItem('headpicture')
        window.sessionStorage.removeItem('nickname')
        window.sessionStorage.removeItem('admin')
        // 跳转到登录页
        this.$router.push('/login')
      }
    }
  }
</script>

<style>
</style>
